<script setup>
import { ref } from "vue";
import { useStore } from "@/store";
import { showToast } from "vant";
import { api } from "@/utils/api";
import dayjs from 'dayjs';

const store = useStore();
const inputFocus = ref(true)
const inputCursor = ref(undefined)
const form = ref({
  content: '',
  imageList: [],
})
const uploadFile = file=>{
  const forms = new FormData();
  forms.append("files", file); // 获取上传图片信息
  const config = {
    url: '/common/uploads',
    method: 'POST',
    body: forms,
  }
  return api(config)
}

const afterRead = (file) => {
  const files = [].concat(file)
  files.map(async v=>{
    form.value.imageList = form.value.imageList.map(v=>{
      if(v.status===''){
        return {
          ...v,
          status: 'uploading',
          message: '上传中',
        }
      }else return {...v}
    })
    const i = form.value.imageList.findIndex(z => z['file'] === v.file)
    uploadFile(v.file).then(res=>{
      form.value.imageList[i] = {
        ...form.value.imageList[i],
        url: res['fileNames'],
        objectUrl: res.urls,
        status: 'success',
        message: '上传成功',
      }
    }).catch(()=>{
      form.value.imageList[i] = {
        ...form.value.imageList[i],
        url:'',
        objectUrl: '',
        status: 'failed',
        message: '上传失败',
      }
    })
  })
}

const beforeUpload = file=>{
  return [].concat(file).filter(v=>{
    const reg = /(jpg|jpeg|png|mp4)/g.test(v.type)
    if(!reg) showToast('文件只能是图片或者视频')
    return reg
  })
}

const onOversize = () => {
  showToast('文件大小不能超过 20MB');
}

// 文字内容
const inputBlur = (event) => {
  inputCursor.value = event.detail.cursor;
  inputFocus.value = false;
}
// 发布
const clickCreate = async () => {
  if (!form.value.content) {
    uni.showToast({
      title: "请输入内容噢~",
      icon: "none"
    })
    return;
  }
  const { userId } = store.getUserInfo
  const { avatar } = store.getUserInfo
  const Form = {
    userId,
    dynamic: form.value.content,
    publishTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    imgs: form.value.imageList.map((v=>(v.url))).join(','),
    avatar,
    title: ''
  }
  const { code } = await api({
    url: '/My/dynamic',
    method: 'POST',
    data:Form
  })
  if(code===200) showToast('发布成功')
  form.value = {
    content: '',
    imageList: [],
  }
}
</script>

<template>
  <view class="Content">
    <view class="container">
      <textarea
          v-model="form.content"
          :auto-height="true"
          :focus="inputFocus"
          :show-confirm-bar="false"
          class="post-txt" maxlength="1500" placeholder="想说什么就说什么叭- -"
          @blur="inputBlur"
      />
      <van-uploader
          v-model="form.imageList"
          reupload
          multiple
          deletable
          accept="*"
          :after-read="afterRead"
          :before-read="beforeUpload"
          :max-count="16"
          :max-size="(20 * 1024) * 1024"
          @oversize="onOversize"
      />
    </view>

    <!-- 底部确定按钮 -->
    <view @click="clickCreate" class="yue-base-button">
      <view>确定发布~</view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.Content {
  height: calc(100vh - 44px);
  background-color: #FFFFFF;
  border-radius: 30upx 30upx 0 0;
}

.container {
  padding: 15px 22px;
  overflow: hidden;
}

.post-txt {
  width: 100%;
  min-height: 300rpx;
}

/* 选择位置 */
.choose-location {
  display: inline-flex;
  align-items: center;
  background-color: #eee;
  font-size: 28rpx;
  border-radius: 100rpx;
  padding: 10rpx 20rpx;
  margin-left: 5rpx;
  line-height: 1;
  color: #616161;

  .txt {
    margin-left: 10rpx;
  }
}

.yue-base-button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  width: 100%;
  padding: 40rpx 0;
  z-index: 3;
}

.yue-base-button view {
  width: 560rpx;
  text-align: center;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 96rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #FFFFFF;
  background: #07C062;
}

// 相机icon
.icon-camera {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 210rpx;
  height: 210rpx;
  border-radius: 6rpx;
  margin: 5rpx 0 0 5rpx;
  background-color: #f4f5f7;
  border: 1px solid red;
}

// 媒体列表
.img-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.img-list-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.img-item {
  width: 210rpx;
  height: 210rpx;
  margin: 5rpx;
  border-radius: 6rpx
}
</style>

